<template>

	<view class="content" style="background-color: #fff;margin-top: 40rpx;">
		<public-module></public-module>
			<!-- 轮播图 -->
			<view class="swiper-baner">
				<u-swiper :list="banner" keyName="url" interval="4000"  indicatorMode="line" circular autoplay
					:height="height" radius="6" @click="bannerJumpUrl"></u-swiper>
			</view>
			
	</view>
</template>

<script>
	import {getScene} from "@/plugins/utils.js" 
	import fTabbar from '@/components/module/f-tabbar/f-tabbar';
	import fNavbar from '@/components/module/f-navbar/f-navbar';
	// 首页导航
	import navigation from '@/components/indexComponents/navigation';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		loGetLocation
	} from '@/config/common';
	export default {
		components: {
			fTabbar,
			fNavbar,
			navigation,
		},
		computed: {
			...mapState(['PrimaryColor', `userInfo`]),
			freeSpecsButtonBackground() {
				return this.$u.colorToRgba(this.$u.rgbToHex(this.PrimaryColor), 0.75)
			},
		},
		props:{
			height:{
			    type:String,
			    default:'200rpx',
			},
			banner:{
			    type:Array,
			    default:[
					{
						"url": '',
						"href": "",
						"title": "",
					}
				],
			},
		
		},
		data() {
			return {
			
			}
		},
		watch: {
			// //数据改变请求接口
			userInfo: {
				handler: function() {
					//请求接口
					if (this.userInfo.exhibitionBox && this.is_enabled) {
						this.activity_show = true
						this.getAddReceive()
						this.userInfo.exhibitionBox = false
						this.setUserInfo(this.userInfo)
					}
				},
				deep: true
			}

		},
		



		methods: {
		
			//轮播图跳转
			bannerJumpUrl(e) {
					this.adJump(this.banner[e])
			},
		
		// 跳转
		adJump(item){
			if (this.userInfo.token) {
				// 小程序跳转
				if (item.href && item.type == 3) {
					this.onAdJump(item)
				}
				// 跳转H5
				if (item.href && item.type == 2) {
					this.onJump('/pages/webview/webview?url=' + encodeURI('' + item.href))
				}
				// 跳转视频
				if (item.href && item.type == 1) {
					this.videoLook(item.href)
				}
				if (item.href && item.type == 6) {
					this.onAdJump(item)
				}
			} else {
				this.judgePhone()
			}
		},
			
		videoLook(url){
			let src = Array.isArray(url)? url[0]:url;
			uni.$u.route('/pagesCircle/video/look', 
			  {src:src},
			);
		},
		onAdJump(obj){
			wx.vibrateShort();
			
			if(obj.type==3&&!obj.appid&&obj.href){
				// 跳转小程序内部
				uni.navigateTo({
					url: obj.href,
					fail: function(res) {
						
					    uni.reLaunch({
					    	url:obj.href
					    })
					  }
				})
			}
			if(obj.type==6&&!obj.appid&&obj.href){
				// 跳转小程序内部
				uni.navigateTo({
					url: obj.href,
					fail: function(res) {
						
					    uni.reLaunch({
					    	url:obj.href
					    })
					  }
				})
			}
			
			// 外部小程序跳转
			if(obj.type==3&&obj.appid&&obj.href){
				// 跳转小程序内部
				
				uni.navigateToMiniProgram({
				    appId:obj.appid,
				    path:obj.href,
				    envVersion:"release",
				    success: res => {
				      // 打开成功
				      
				    },
				    fail: err => {
				      
				    }
				});
			}
			
		},
		},
		

	}
</script>

<style lang="scss" scoped>
	//旅居出行右侧黄色箭头
	.lvju-right-yellow {
		width: 30rpx;
		height: 30rpx;
		line-height: 30rpx;
		background-color: #ff9800;
		border-radius: 15rpx;
		text-align: center;
	}

	.scroll-box {
		display: inline-block;
		position: relative;
		// margin-right: 30rpx;
		overflow: hidden;
		border-radius: 10rpx;
	}

	.bianju {
		margin: 0 30rpx;

	}


.hotimg{
	position: absolute;
	    height: 40rpx;
		border-radius: 20rpx;
		line-height: 40rpx;
	   padding: 0 10rpx;
	   font-size: 24rpx;
	    top: -5px;
	    right: -20px;
	    z-index: 99999;
		background-color: #E1265D;
		color: #ffffff;
		animation: shake .5s infinite;
}
	@keyframes shake {
	
	  10% { 
	
		transform: rotate(10deg);}
	
	  30% { 
	
		transform: rotate(-5deg);
	   }
	
	  50% { 
	  transform: rotate(3deg);
	  }
	 
	 
	  80% { 
	  transform: rotate(-2deg);
	   }
	  90% { 
	   transform: rotate(-1deg);
	  }
	  100% { 
	  transform: rotate(0deg);
	   }
	}
	// 服务
	.fuwu {
		padding: 30rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.fuwu-div {
			text-align: center;
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;
		}

		&-title {
			margin-top: 12rpx;
			font-size: 34rpx;
		}

		.fuwuImg {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50rpx;
		}

		.fuwu-title {
			font-size: 30rpx;
		}
	}


	.lv {
		display: flex;
		justify-content: space-between;

		// padding:  0 25rpx;
		.lv-l {
			width: 338rpx;
			border: 2rpx solid #D8D8D8;
			padding: 30rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			background: #ffffff;

			.lv-l-title {
				font-size: 48rpx;

				// margin-top: 20rpx;

				margin-bottom: 10rpx;
			}

			.lv-l-dectip {
				background: #ffffff;
				border-radius: 20rpx;
				font-size: 32rpx;
				margin-bottom: 40rpx;
				color: #767676;
			}
		}

		.lv-r {
			.lv-con {
				border-radius: 20rpx;
				background: #ffffff;
				width: 334rpx;
				border: 2rpx solid #D8D8D8;
				padding: 30rpx;
				box-sizing: border-box;

				// display: flex;
				// justify-content: space-between;
				.con {
					flex-grow: 1;
				}

				.con-title {
					font-size: 48rpx;
					font-weight: 500;
				}

				.con-dectip {
					color: #767676;
					margin-top: 0rpx;
					font-size: 28rpx;
				}
			}
		}

	}

	.ka {
		border-radius: 20rpx;
		margin-top: 20rpx;
		border: 2rpx solid #D8D8D8;
		padding: 25rpx;
		background: #ffffff;

		.ka-title {

			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 10rpx;

			.ka-title-l {
				font-size: 40rpx;

			}

			.ka-title-r {
				font-size: 28rpx;
				color: #767676;

			}
		}

		.tag {
			display: flex;
			margin: 10rpx 0;

			view {
				border: 2rpx solid #999999;
				font-size: 32rpx;
				margin-right: 20rpx;
				color: #999999;
				padding: 5rpx 10rpx;
				border-radius: 10rpx;
			}
		}

		.ka-price {
			.curren-price {
				color: #E1265D;
				font-size: 48rpx;
				font-weight: bold;
				padding-right: 20rpx;

			}

			.out-price {
				color: #999999;
				font-size: 36rpx;
				text-decoration: line-through;
				font-style: italic;
			}

			.kay-buy {
				width: 200rpx;
				height: 68rpx;
				color: #fff;
				background-color: #E1265D;
				border-radius: 34rpx;
				text-align: center;
				line-height: 68rpx;
				font-size: 36rpx;
			}
		}
	}

	.xing {
		.xing-title {
			text-align: center;
			font-size: 48rpx;
			font-weight: bold;
			padding: 40rpx 0;
		}

		.xin-wrap {
			width: 100%;
			// border: 1rpx solid #D8D8D8;

		}

		.swiper {
			height: 430rpx;
			margin: 0;
			padding: 0;
		}

		.swiper-item {
			display: flex;
			align-items: flex-start;

			// border: 1rpx solid #D8D8D8;
			.xin-ren {
				width: 216rpx;
				margin-right: 20rpx;
				text-align: center;
				overflow: hidden;

				.xing-img image {
					width: 100%;
					height: 292rpx;
					border: 2rpx solid #D8D8D8;
				}

				.xing-name {
					font-size: 36rpx;
					font-weight: bold;
					margin: 20rpx 0;
				}

				.xing-dec {
					font-size: 28rpx;
					color: #767676;
				}
			}


		}

	}

	.scroll-box:last-child .xin-ren:last-child {
		margin-right: 0;
	}

	.hot {
		.hot-tab {
			margin: 20px 0 100rpx 0;
			display: flex;
			justify-content: center;
			font-size: 36rpx;
			font-weight: bold;
			align-items: center;

			view {
				margin: 0 20rpx;

			}

			.active {
				color: #E1265D;
				font-size: 48rpx;
			}
		}

		.hot-content {
			border: 2rpx solid #D8D8D8;
			background-color: #fff;
			border-radius: 10rpx;
			margin-bottom: 30rpx;
		}

		.hot-img {
			position: relative;

			image {
				width: 100%;
				height: 324rpx;
			}

			.hot-img-rl {
				position: absolute;
				bottom: 0;
				display: flex;
				justify-content: flex-end;
				color: #fff;
				width: 100%;
				padding-right: 20rpx;
				padding-bottom: 10rpx;
				align-items: center;
				font-size: 28rpx;
			}
		}

		.hot-title {
			font-size: 40rpx;
			font-weight: bold;
			margin: 20rpx 0 20rpx 20rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			/*超出几行后省略号*/
			overflow: hidden;

		}

		.tag {
			display: flex;
			flex-wrap: wrap;
			padding-left: 20rpx;

			view {
				border: 2rpx solid #999999;
				font-size: 30rpx;
				margin-right: 20rpx;
				color: #999999;
				padding: 4rpx 8rpx;
				margin-bottom: 20rpx;
				border-radius: 10rpx;
			}
		}
	}

	.giftBagBox {
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		background-color: rgba(0, 0, 0, 0.7);
		z-index: 9999;
		display: flex;
		align-items: center;
		justify-content: center;

		.giftBag {
			width: 600rpx;
			height: 800rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.icoBox {
				position: relative;
				right: -300rpx;
				top: 0;
			}

			.img {
				width: 100%;

			}

			.btn {
				width: 80%;
				height: 80rpx;
				border: 4rpx solid yellow;
				border-radius: 35rpx;
				text-align: center;
				line-height: 80rpx;
				font-size: 32rpx;
				color: #fff;
				margin-top: 50rpx;
			}
		}

		.activity {
			width: 694rpx;
			height: 768rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;

			.btnBjBox {
				position: absolute;
				bottom: 120rpx;
				width: 300rpx;
				height: 80rpx;
				background-color: #f3ec88;
				color: #ff9800;
				border: 4rpx solid #ff9800;
				border-radius: 40rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 32rpx;
				font-weight: 600;
				box-shadow: 2rpx 2rpx 3rpx #ebebeb;
			}

			.closeBox {
				position: absolute;
				bottom: -110rpx;


			}
		}
	}
	.addclass{
		position: fixed;
		
		right: 20px;
		height: 60rpx;
		border-radius: 30rpx;
		line-height: 60rpx;
		padding-right: 90rpx;
		padding-left: 20rpx;
		color: #fff;
		z-index: 999999;
		background-color: rgba(255, 45, 85, 1);
	}
.tuxing{
	width: 100vw;
	position: fixed;
	height: 20rpx;
	top: 0;
	left: 0;
}
	.addclass .close-btn{
		position: absolute;
		height: 50rpx !important;
		width: 50rpx !important;
		right: 5rpx;
		top: 5rpx;
		
	}
	.addclass span{
		position: absolute;
		top: -16rpx;
		
		   width: 0;
		    height: 0;
		    border-bottom: 20rpx solid rgba(255, 45, 85, 1);
		    border-right: 20rpx solid transparent;
		    border-left: 20rpx solid transparent;
	}
</style>